<template>
    <div class="radar-box">
        <div :style="{width: width + 'px'}" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div class="rank-box" :style="{width: width + 'px',height: height+'px'}">
            <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
export default {
    name: 'radar',
    components: {
        ResponsiveBarChart,
    },
    props: {
        width: {
            type: Number,
            default: 400
        },
        height: {
            type: Number,
            default: 400
        },
        title: {
            type: String,
            default: '预警分析'
        },
        legendData: {
            type: Array,
            default: () => ['上月预警', '本月预警']
        },
        max: {
            type: Number,
            default: 100
        },
        indicator: {
            type: Array,
            default: () => ['消防警告', '安防警告', '电气警告', '防雷警告', '其他警告', '喝水警告', '吃饭警告']
        },
        seriesData: {
            type: Array,
            default: () => [
                { month: '上月预警', fire: 10, security: 40, electrical: 8, lightning: 3 },
                { month: '本月预警', fire: 12, security: 30, electrical: 7, lightning: 4 },
            ]
        },
        colore: {
            type: Array,
            default: () => ['rgba(21, 154, 255, .2)', 'rgba(255, 119, 52, .2)', 'rgba(217, 231, 255, .2)', 'rgba(255, 201, 122, .2)']
        }
    },
    data() {
        return {
            chartOptions: {},
            circleCount: 4,
        }
    },
    computed: {},
    watch: {},
    methods: {
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption() {

            //每条数据的最大值，不运行此方法默认的最大值为最大的那条数据
            const indicatorData = this.indicator.map(item => {
                return {
                    name: item,
                    max: this.max
                }
            });

            const colors = [
                'rgba(208, 222, 238, .1)',
                'rgba(255, 255, 255, .1)',
            ];
            

            this.chartOptions = {
                tooltip: {},
                legend: {
                    bottom: '0',
                    icon: 'square',
                    data: this.legendData,
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: '#fff' // 文字颜色
                    },
                },
                radar: {
                    // shape: 'circle',
                    center: ['50%', '50%'],
                    radius: '60%',
                    name: {
                        textStyle: {
                            color: 'rgba(255,255,255,.7)',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            color: Array.from({ length: this.circleCount }, (_, i) => colors[i % colors.length])
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(204,204,204,.2)'
                        }
                    },
                    axisLine: {
                        // show: false,
                        lineStyle: {
                            color: 'rgba(204,204,204,.3)' // 设置雷达图中间射线的颜色为#FEAE01
                        }
                    },
                    axisLabel: {
                        // show: function (index) {
                        //     console.log(index)
                        //     // 只显示每个圈的第一个刻度值
                        //     return index === 0;
                        // }
                        // show: true,
                        // interval: function (index, value) {
                        //     return index === 0
                        // }
                        // formatter: '{value}',
                        // formatter: function (value, index) {
                        //     return index === 0 ? 1 :0
                        // }
                    },
                    indicator: indicatorData,
                },
                series: [{
                    name: '警告情况',
                    type: 'radar',
                    symbol: 'none',
                    // 给每个月的数据设置不同的颜色
                    data: [
                        {
                            value: [60, 70, 50, 40, 80],
                            name: '上月预警',
                            areaStyle: {//数据量content
                                color: 'rgba(208, 222, 238, .3)'
                            },
                            itemStyle: {//数据量border
                                color: 'rgba(208, 222, 238, .6)',
                            }
                        },
                        {
                            value: [70, 10, 10, 10, 100],
                            name: '本月预警',
                            areaStyle: {
                                color: 'rgba(255, 119, 52, 0.3)'
                            },
                            itemStyle: {
                                color: 'rgba(255, 119, 52, 0.6)'
                            }
                        }
                    ],
                }]
            }
        }
    },
    created() {
        this.getOption()
    },
    mounted() { },
}
</script>
  
<style lang='less' scoped></style>